<discover-app-w class="app-container" data-fetch-counter="{{fetchCounter}}">
  <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>

  <!-- Local nav. -->
  <wz-top-nav
    app-name="'discover'"
    config="topNavMenu"
    index-patterns="[indexPattern]"
    on-query-submit="updateQuery"
    on-saved-query-id-change="updateSavedQueryId"
    query="state.query"
    saved-query-id="state.savedQuery"
    screen-title="screenTitle"
    show-date-picker="indexPattern.isTimeBased()"
    show-save-query="showSaveQuery && tabView !== 'cluster-monitoring'"
    show-search-bar="tabView"
    show-filter-bar="tabView !== 'cluster-monitoring'"
    show-query-input="tabView !== 'cluster-monitoring'"
    use-default-behaviors="true"
  >
  </wz-top-nav>

  <main ng-show="tabView !== 'cluster-monitoring'" class="container-fluid">
    <div ng-show="tabView === 'discover'" class="row">
      <div ng-show="tabView === 'discover'" class="col-md-2 dscSidebar__container collapsible-sidebar" id="discover-sidebar" data-test-subj="discover-sidebar">
        <div class="dscFieldChooser">
          <discover-sidebar
            columns="state.columns"
            field-counts="fieldCounts"
            hits="rows"
            index-pattern-list="opts.indexPatternList"
            on-add-field="addColumn"
            on-add-filter="filterQuery"
            on-remove-field="removeColumn"
            selected-index-pattern="searchSource.getField('index')"
            set-index-pattern="setIndexPattern"
            state="state"
          >
          </discover-sidebar>
        </div>
      </div>

      <div class="dscWrapper col-md-10">
        <discover-no-results
          ng-show="resultState === 'none'"
          shard-failures="failures"
          time-field-name="opts.timefield"
          query-language="state.query.language"
          get-doc-link="getDocLink"
        ></discover-no-results>

        <discover-uninitialized
          ng-show="resultState === 'uninitialized'"
          on-refresh="fetch"
        ></discover-uninitialized>

        <!-- loading -->
        <div ng-show="resultState === 'loading'">
          <discover-fetch-error
            ng-show="fetchError"
            fetch-error="fetchError"
          ></discover-fetch-error>

          <loading-spinner ng-hide="fetchError" class="dscOverlay"></loading-spinner>
        </div>

        <div class="dscWrapper__content" ng-show="resultState === 'ready'">
          <!-- result -->
          <div class="dscResults">
            <skip-bottom-button on-click="onSkipBottomButtonClick"></skip-bottom-button>

            <hits-counter
              hits="hits || 0"
              show-reset-button="opts.savedSearch.id"
              on-reset-query="resetQuery"
            >
            </hits-counter>

            <section
              aria-label="{{::'discover.histogramOfFoundDocumentsAriaLabel' | i18n: {defaultMessage: 'Histogram of found documents'} }}"
              class="dscTimechart"
              ng-if="opts.timefield"
            >
              <timechart-header 
                from="toMoment(timeRange.from)"
                to="toMoment(timeRange.to)" 
                options="intervalOptions" 
                on-change-interval="changeInterval" 
                state-interval="state.interval"
                show-scaled-info="bucketInterval.scaled"
                bucket-interval-description="bucketInterval.description"
                bucket-interval-scale="bucketInterval.scale"
              >
              </timechart-header>

              <discover-histogram
                class="dscHistogram"
                ng-show="vis && rows.length !== 0"
                chart-data="histogramData"
                timefilter-update-handler="timefilterUpdateHandler"
                watch-depth="reference"
                data-test-subj="discoverChart"
              ></discover-histogram>
            </section>

            <section
              class="dscTable"
              fixed-scroll
              aria-labelledby="documentsAriaLabel"
            >
              <h2 class="euiScreenReaderOnly"
                id="documentsAriaLabel"
                i18n-id="discover.documentsAriaLabel"
                i18n-default-message="Documents"
              ></h2>
              <doc-table
                hits="rows"
                index-pattern="indexPattern"
                sorting="state.sort"
                columns="state.columns"
                infinite-scroll="true"
                filter="filterQuery"
                data-shared-item
                data-title="{{opts.savedSearch.lastSavedTitle}}"
                data-description="{{opts.savedSearch.description}}"
                data-test-subj="discoverDocTable"
                minimum-visible-rows="minimumVisibleRows"
                render-complete
                on-add-column="addColumn"
                on-change-sort-order="setSortOrder"
                on-move-column="moveColumn"
                on-remove-column="removeColumn"
              ></doc-table>

              <a tabindex="0" id="discoverBottomMarker">&#8203;</a>

              <div
                ng-if="rows.length == opts.sampleSize"
                class="dscTable__footer"
                data-test-subj="discoverDocTableFooter"
              >
                <span
                  i18n-id="discover.howToSeeOtherMatchingDocumentsDescription"
                  i18n-default-message="These are the first {sampleSize} documents matching
                  your search, refine your search to see others. "
                  i18n-values="{
                    sampleSize: opts.sampleSize,
                  }"
                ></span>
                <a
                  kbn-accessible-click
                  ng-click="scrollToTop()"
                  i18n-id="discover.backToTopLinkText"
                  i18n-default-message="Back to top."
                ></a>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </main>
</discover-app-w>
